<template>
  <el-dialog v-model="dialogFormVisible" @close="handleClose" :close-on-click-modal="false" :title="title"
             width="60%" >
    <el-form
        v-loading="editLoading"
        ref="formRef"
        label-width="150px"
        :model="form"
        style="padding: 30px"
        :rules="rules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户id：" prop="userId">
            <el-input v-model="form.userId" autocomplete="off" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="vip id：" prop="vipId">
            <el-input v-model="form.vipId" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="购买用户：" prop="nickname">
            <el-input v-model="form.nickname" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="头像：" prop="avatar">
            <el-input v-model="form.avatar" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="购买标题：" prop="title">
            <el-input v-model="form.title" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="兑换码：" prop="code">
            <el-input v-model="form.code" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="购买价格：" prop="price">
            <el-input v-model="form.price" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户手机：" prop="phone">
            <el-input v-model="form.phone" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户姓名：" prop="username">
            <el-input v-model="form.username" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户UID：" prop="uuid">
            <el-input v-model="form.uuid" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="用户地址：" prop="address">
            <el-input v-model="form.address" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="订单编号：" prop="orderno">
            <el-input v-model="form.orderno" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="订单交易号：" prop="tradeno">
            <el-input v-model="form.tradeno" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="支付方式：" prop="payMethodName">
            <el-input v-model="form.payMethodName" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="描述：" prop="description">
            <el-input v-model="form.description" autocomplete="off" readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="订单完整信息：" prop="description">
            <el-input v-model="form.orderJson" autocomplete="off" type="textarea" readonly/>
          </el-form-item>
        </el-col>
      </el-row>


      <div class="dialog-footer" style="text-align: center">
        <el-button @click="handleClose" icon="remove">关闭</el-button>
<!--        <el-button type="primary" :loading="suLoading" @click="handleSubmit" icon="plus">{{
            form.id ? '更新' : '保存'
          }}
        </el-button>-->
      </div>
    </el-form>
  </el-dialog>
</template>
<script setup>
import KVA from '@/utils/kva.js'
import debounce from '@/utils/debounce'
import {getById,saveUpdate} from '@/api/users/vipbuy.js'



const emits = defineEmits(["load"])
// 控制弹窗得显示
const dialogFormVisible = ref(false)
const authorityList = ref([])
const benefitsIdOptions = ref([])
// 这个数据模型
let form = ref({
  id:"",
  title:"",
  tag: "",
  note: "",
  price: "",
  realprice: '',
  vipDays: 1,
  vipType:1,
  benefitsIdsArr:[],
  benefitsIds:'',
  status: 1
})

// 弹出标题
const title = ref("查看详情")
const editLoading = ref(false)
const suLoading = ref(false)
// 表单ref, 用于提交最终得验证处理
const formRef = ref({})
// 表单验证
const rules = reactive({
  // "title": [{required: true, message: '请输入名称', trigger: 'blur'}],
  // "tag": [{required: true, message: '请输入标签', trigger: 'blur'}],
  "note": [{required: true, message: '请输入说明', trigger: 'blur'}],
  // "price": [{required: true, message: '请输入价格', trigger: 'blur'}],
  "realprice": [{required: true, message: '请输入折扣前价格', trigger: 'blur'}],
  "vipDays": [{required: true, message: '请输入会员卡实际天数', trigger: 'blur'}],
  "vipType": [{required: true, message: '请选择会员卡类型', trigger: 'blur'}],
  "benefitsIdsArr": [{required: true, message: '请选择会员卡权益', trigger: 'blur'}],
  "status": [{required: true, message: '请选择是否启用', trigger: 'blur'}],
})


// 打开弹窗
const handleOpen = async (opid,alist) => {
  authorityList.value = alist
  // 每次打开头重置
  dialogFormVisible.value = true;
  if (opid) {
    editLoading.value = true;
    const resp = await getById(opid)
    editLoading.value = false;
    form.value = resp.data
  }
}

// 保存和修改
const handleSubmit = () => {
  suLoading.value = true
  debounce(() => {
    formRef.value.validate(async (valid, fields) => {
      if (valid) {
        try {
          form.value.benefitsIds = form.value.benefitsIdsArr.join(',')
          await saveUpdate(form.value)
          suLoading.value = false
          // 提示保存成功
          KVA.notifySuccess(form.value.id ? "更新成功" : "保存成功")
          // 关闭弹窗
          handleClose()
          // 刷新方法
          emits("load")
        } catch (ex) {
          suLoading.value = false
        }
      } else {
        suLoading.value = false
      }
    })
  }, 600)
}

const handleClose = () => {
  formRef.value.resetFields()
  suLoading.value = false
  editLoading.value = false
  dialogFormVisible.value = false
  form.value = {
    id:"",
    title:"",
    tag: "",
    note: "",
    price: "",
    realprice: 1,
    vipDays: 1,
    vipType:1,
    benefitsIdsArr:[],
    benefitsIds:'',
    benefitsIdsStr:'',
    status: 1
  }

}

// 把弹出打开得方法暴露给父组件进行调用
defineExpose({
  handleOpen
})
</script>
